<template>
  <a-layout id="glr_sensorDetail" :style="{ height: screenHeight*0.77 + 'px' }">
    <a-layout-header>
      <div class="header_sep" >
        <span>传感器名称:</span>
        <a-form-item>
        <a-select v-model="sensorCode"  :placeholder="$t('base.pleaseChoose')" style="width: 200px;"  @change="changeSensor">
          <a-select-option v-for="item in sensorList" :key="item.id" :value="item.code">
            {{item.name}}
          </a-select-option>
        </a-select>
        </a-form-item>
      </div>
    </a-layout-header>
    <a-layout-content style="border;1px solid yellow">
      <ul class="accordion">
        <li class="accordion-li" >
          <i class="accordion-icon fa "  >
            <span>湿度</span><br>
            <img :src="temp.humidity" ><br>
            <span>{{sensor.humidity}}RH</span>
          </i>
          <a href="javascript:void(0)"  >
            <div class="accordion-img" :style="{background:'url('+img.url1+')',backgroundSize:'100% 100%',}"  alt="null"></div>
          </a>
          <div class="accordion-description">
            <h4 class="accordion-title">湿度</h4>
            <p class="accordion-content" >{{sensor.humidity}}RH</p>
          </div>
        </li>



        <li class="accordion-li" >
          <i class="accordion-icon fa " >
            <span>温度</span><br>
            <img :src="temp.temperature"><br>
            <span >{{sensor.temperature}}℃</span>
          </i>
          <a href="javascript:void(0)">
            <div class="accordion-img" :style="{background:'url('+img.url4+')',backgroundSize:'100% 100%',}"  alt="null"></div>
          </a>
          <div class="accordion-description" >
            <h4 class="accordion-title" >温度</h4>
            <p class="accordion-content" >{{sensor.temperature}}℃</p>
          </div>
        </li>






        <li class="accordion-li">
          <i class="accordion-icon fa ">
            <span>PM2.5</span><br>
            <img :src="temp.PM25"><br>
            <span >{{sensor.pm25}}ug/m3</span>
          </i>
          <a href="javascript:void(0)">
            <div class="accordion-img" :style="{background:'url('+img.url2+')',backgroundSize:'100% 100%',}"  alt="null"></div>
          </a>
          <div class="accordion-description" >
            <h4 class="accordion-title">PM2.5</h4>
            <p class="accordion-content">{{sensor.pm25}}ug/m3</p>
          </div>
        </li>


        <li class="accordion-li">
          <i class="accordion-icon fa " >
            <span>CO2</span><br>
            <img :src="temp.PM10"><br>
            <span >{{sensor.pm10}}ug/m3</span>
          </i>
          <a href="javascript:void(0)">
            <div class="accordion-img" :style="{background:'url('+img.url3+')',backgroundSize:'100% 100%',}"  alt="null"></div>
          </a>

          <div class="accordion-description">
            <h4 class="accordion-title" >CO2</h4>
            <p class="accordion-content" >{{sensor.pm10}}ug/m3</p>
          </div>
        </li>




      </ul>
    </a-layout-content>
    <a-layout-footer></a-layout-footer>
  </a-layout>

</template>

<script>
    import {JeecgListMixin} from '@/mixins/JeecgListMixin'
    import {httpAction} from '@/api/manage'
    import JInput from '@/components/jeecg/JInput'
  import $ from'jquery'
  export default {
    mixins: [JeecgListMixin],
    name: "GlrSensorDetail",
    components: {
        JInput
    },
    data(){
      return{
        screenHeight: document.body.clientHeight,
          sensorList:[],
          sensorCode:'',
        img:{
          url1:require("@/assets/sensor/bg_imgs/01.png"),
          url2:require("@/assets/sensor/bg_imgs/02.png"),
          url3:require("@/assets/sensor/bg_imgs/03.png"),
          url4:require("@/assets/sensor/bg_imgs/04.png"),
          url5:require("@/assets/sensor/bg_imgs/05.png"),
          url6:require("@/assets/sensor/bg_imgs/06.png"),

        },

        temp:{
          humidity: require("@/assets/sensor/temp/humidity.png"),
          noise: require("@/assets/sensor/temp/noise.png"),
          PM10: require("@/assets/sensor/temp/PM10.png"),
          PM25: require("@/assets/sensor/temp/PM25.png"),
          pressure: require("@/assets/sensor/temp/pressure.png"),
          radiation: require("@/assets/sensor/temp/radiation.png"),
          rainfall: require("@/assets/sensor/temp/rainfall.png"),
          temperature: require("@/assets/sensor/temp/temperature.png"),
          ultraviolet: require("@/assets/sensor/temp/ultraviolet.png"),
          wind: require("@/assets/sensor/temp/wind.png"),
          windDirection: require("@/assets/sensor/temp/windDirection.png"),
        },
        sensor:{},
          url:{
              list:'/glr/glrSensor/getGlrSensorList',
              getGlrSensorByCode:'/glr/glrSensor/getGlrSensorByCode',
          },
      }
    },
    methods:{
        changeSensor(value){
            var that=this;
            httpAction(that.url.getGlrSensorByCode,{code:value},"post").then((res)=>{
                if(res.success){
                    that.sensor=res.result;
                }else{
                    that.$message.warning(res.message);
                }
            }).finally(() => {
                that.confirmLoading = false;
            })
        }
    },
    mounted(){
      $("li").mouseover(function(){
        $(this).addClass('active');
      });
      $("li").mouseout(function(){
        $(this).removeClass('active');
      });

      //根据屏幕大小确定自适应高度
      const that = this
      window.onresize = () => {
        return (() => {
          window.screenHeight = document.body.clientHeight
          that.screenHeight = window.screenHeight
        })()
      }
        httpAction(that.url.list,{},"post").then((res)=>{
            if(res.success){
                that.sensorList=res.result;
                that.sensorCode=that.sensorList[0].code;
                that.changeSensor(that.sensorCode);
            }else{
                that.$message.warning(res.message);
            }
        }).finally(() => {
            that.confirmLoading = false;
        })

    },

    //监控屏幕大小
    watch: {
      screenHeight (val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            // 打印screenWidth变化的值
            console.log(that.screenHeight)
            that.timer = false
          }, 400)
        }
      }
    }

  }
</script>

<style scoped>

  #glr_sensorDetail {
    text-align: center;
    height: 100%;
  }
  #glr_sensorDetail .ant-layout-header{
    height: 13%;
    background-color: #222d32;
    display: flex;
    flex-direction: row;
  }
  .ant-layout-header .header_sep{
    height: 100%;
    width: 20%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  .header_sep span{
    margin-right: 10%;
  }
  #glr_sensorDetail .ant-layout-footer {
    background: #222d32;
  }
  #glr_sensorDetail .ant-layout-footer {
    line-height: 1.5;
  }
  #glr_sensorDetail .ant-layout-content {
    /*background: rgba(16, 142, 233, 1);*/
    background: #222d32;
    color: #fff;
  }
  #glr_sensorDetail > .ant-layout {
    margin-bottom: 0px;
  }
  #glr_sensorDetail > .ant-layout:last-child {
    margin: 0;
  }


  * {
    list-style-type: none;
    font-family: "Arial","Microsoft YaHei","榛戜綋","瀹嬩綋",sans-serif;
    padding: 0px;
    margin: 0px;
  }
  body{
    background: #0E122D;
  }

  accordion-description{
    text-align: center;
    background: linear-gradient(rgb(255, 255, 255,0), rgb(255, 255, 255));
  }
  .accordion-title{
    text-shadow: rgb(255, 255, 255) 0px 0px 1px;
  }
  .accordion-content{
    text-shadow: rgb(255, 255, 255) 0px 0px 1px;
  }
  .accordion-icon img{
    width:50px;
    height:50px;
    border-style:none;
    border-radius:25px;

  }
  .accordion-icon{
    color: rgb(51, 51, 51)
  }
  .accordion-icon span{
    font-size:20px;color:#777;
    width: 100%;
    height: 10%;
  }
  .accordion-title{
    font-size:22px;
    font-weight:lighter!important;
  }

  .accordion-content{
    font-size:32px;
    font-weight:800;
  }

  .accordion {
    clear: both;
    overflow: hidden;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    background-color:rgba(255, 255, 255, 0.8)
  }

  /*宽度--静态*/
  .accordion-li {
    float: left;
    color: #333;
    border-right: none;
    overflow: hidden;
    width: 9.08%;
    transition: width 1.5s;
    position: relative;
    cursor: pointer;
    height: 500px;
  }
  .accordion .accordion-li .accordion-img {
    border: thin solid #efefef;
  }
  .accordion .accordion-li:last-child {
    border-right: thin solid #efefef;
  }
  /*before*/

  .accordion .accordion-li::before {
    content: "";
    display: block;
    position: absolute;
    background-color: white;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.2;
    transition: all 0.5s;
  }


  .accordion .accordion-li .accordion-description {

    content: "";
    display: block;
    position: absolute;
    background-color: white;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.7;
    transition: all 0.5s;
    top: inherit;
    bottom: 50%;
    height: 50%;
    margin-bottom: -135px;
    padding: 1.5%;
  }
  .accordion-icon span{
    font-size:20px;color:#777;
  }
  /*图片宽度*/
  .accordion-img{
    width:300px;height:500px;
  }
  .accordion-content,.accordion-title, .accordion:hover .accordion-li .active .accordion-title, .accordion:hover .active .accordion-li .accordion-title {
    opacity: 0;
    transition: all 0.5s;
    text-shadow: 0px 0px 1px #e0f9ff;
  }
  .accordion-title {
    font-size: xx-large;
    font-weight: bold;
  }
  .accordion-icon {
    position: absolute;
    width:100%;
    height: 50%;
    margin-left: -50%;
    margin-top: 90%;
    font-size: 40px;
    z-index: 10;
    opacity: 1;
    transition: opacity 2.5s;
    text-align:center;
    padding-top: 15%;
  }

  /*hover --li*/

  .accordion:hover li {
    width: 8.5%;
    transition: width 1s;
  }

  /*hover --active*/

  .accordion:hover .active {
    width: 14.9%;
    height:500px;
    transition: width 1s;
  }

  /*动态效果*/

  .accordion:hover li.active {
    transition: width 0.5s;
  }


  .accordion:hover .active::before {
    opacity: 0;
  }


  .accordion:hover .active .accordion-icon {
    opacity: 0;
    transition: opacity .2s;
  }


  .accordion:hover .active .accordion-description {
    content: "";
    display: block;
    position: absolute;
    background-color: white;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 1;
    transition: all 0.5s;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0), white);
    background: -o-linear-gradient(rgba(255, 255, 255, 0), white);
    background: -moz-linear-gradient(rgba(255, 255, 255, 0), white);
    background: linear-gradient(rgba(255, 255, 255, 0), white);
    padding-top: 9%;
    height: auto;
    width: 100%;
    top: inherit;
    bottom: 136px;
  }


  .accordion:hover .active .accordion-content, .accordion:hover .active .accordion-title {
    opacity: 1  !important;
    transition: all 2s;
  }


  .accordion-img {
    display: block;
  }
  .accordion a {
    display: block;
    background-color: white;
    width: 100%;
    height: 100%;
  }
</style>